<template>
<div id="light">

</div>
</template>
<script>
export default{
    name:'Light',

    data(){
        return{

        }
    },
    mounted(){
        this.drawLine();
    },
    methods:{
        drawLine(){
            var lightCharts = this.$echarts.init(document.getElementById('light'));
            var optionMap= {
               backgroundCollor: '#272D3A',
               title:{
                   text:'服务架构热力分布',
                   left:'center',
                   textStyle:{
                       color:'#fff'
                   }
               },
               //圆点的提示
               tooltip:{
                   trigger:'item', //数据项图形触发
                   formatter:function(params){
                       return params.name + ' : ' + params.value[2] 
                   }
               },
               //图例按钮，点击可以选择那些不显示
               legend:{
                   orient:'vertical',
                   left:'left',
                   top:'bottom',
                   data:['地区热度','top5'],
                   textStyle:{
                       color:'rgb(118, 149, 252)'
                   }
               },
               //坐标系组件
               geo:{
                   map:'china',
                   label:{
                       emphasis:{
                           show:true
                       }
                   },
                   itemStyle:{
                       normal:{
                           areaColor:'rgb(127, 128, 128)',
                           borderColor:'#282f3C'
                       },
                       emphasis:{
                           areaColor:'#879684'
                       }
                   }
               },
               series:[
                   {
                       name:'地区热度',
                       type:'scatter',
                       coordinateSystem:'geo',
                       data: [
              {name: '北京', value: [116.4136103013, 39.9110666857, 12312]},
              {name: '天津', value: [117.2059037622, 39.0908458050, 2654]},
              {name: '南京', value: [118.8029140176, 32.0647517242, 14782]},
              {name: '广州', value: [113.2708136740, 23.1351666766, 9620]},
              {name: '深圳', value: [114.0661345267, 22.5485544122, 145874]},
              {name: '上海', value: [121.4803295328, 31.2363429624, 7812]},
              {name: '杭州', value: [120.1617445782, 30.2799186759, 567841]},
              {name: '苏州', value: [120.5896123397, 31.3045865027, 4578]},
              {name: '西安', value: [108.9462765501, 34.3474989219, 24586]},
              {name: '乌鲁木齐', value: [87.6233162377, 43.8327112073, 8796]},
              {name: '拉萨', value: [91.1209613886, 29.6500915169, 781]},
              {name: '呼和浩特', value: [111.7584796016, 40.8475472021, 921]},
              {name: '兰州', value: [103.8406667911, 36.0673285116, 6541]},
              {name: '郑州', value: [113.6313915479, 34.7533581487, 8547]},
              {name: '昆明', value: [102.8396611228, 24.8859360126, 4852],title:'是阿萨德'}
          ],
                       symbolSize:12,
                       label:{
                           normal:{
                               show:false
                           },
                           emphasis:{
                               show:true
                           }
                       },
                       itemStyle:{
                           normal:{
                               color:'#ddb926'
                           },
                           emphasis:{
                               borderColor:'#fff',
                               borderWidth:1
                       }
                   },
                   

                },
                {
                    name:'top5',
                    type:'effectScatter',
                    coordinateSystem:'geo',
                    data:[
                      {name: '乌鲁木齐', value: [87.6233162377, 43.8327112073, 8796]},
              {name: '拉萨', value: [91.1209613886, 29.6500915169, 781]},
              {name: '呼和浩特', value: [111.7584796016, 40.8475472021, 921]},
              {name: '兰州', value: [103.8406667911, 36.0673285116, 6541]},
              {name: '郑州', value: [113.6313915479, 34.7533581487, 8547]}
                    ],
                    symbolSize:12,
                    showEffectOn:'render',
                    rippleEffect:{
                        brushType:'stroke',
                    },
                    hoverAnimation:true,
                    label:{
                        normal:{
                            show:false
                        }
                    },
                    itemStyle:{
                       normal:{
                           color:'#f4e925',
                           shadowBlur:10,
                           shadowColor:'#333'
                       }
                    },
                    zlevel: 1
                }
               ]
            }
            lightCharts.setOption(optionMap);
        }
    }
}

</script>
<style>
  div{
    width: 1000px;
    height: 600px;
    margin-left: 120px;
    margin-top: 240px;
  }
</style>